import React, { useState } from 'react';
import { useRequest } from 'ahooks'
import { message } from 'antd'
import 'antd/dist/antd.css'

const App = () => {
  const getUserName = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject({success: false})
      }, 1000);
    })
  }
  const [state, setState] = useState('')
  const { data, loading, run } = useRequest(getUserName, {
    manual: true,
    onSuccess: (result, params) => {
      if (result.success) {
        setState('');
        message.success('提交成功')
        console.log('+++++++');
      }
    },
    onError: (error) => {
        message.error('提交失败')
        console.log('提交失败');
    }
  })

  return (
    <>
      <p>{data && JSON.stringify(data)}</p>
      <input
        type="text"
        value={state}
        onChange={e => setState(e.target.value)}
        placeholder="please enter message"
        style={{width: 240, marginRight: 16}}
      />
      <button disabled={loading} onClick={() => run(state)}>{loading? 'loading' : 'Edit'}</button>
    </>
  )
}

export default App;